<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j page-commodity-brand">
    <view class="title">
      <search-bar
        :key-word="name"
        :placeholder="'搜索品牌名称'"
        @handle-search="search"
      />
    </view>
    <empty-tips
      v-show="isLoaded && Object.getOwnPropertyNames(brandList).length<1"
      :tips-list="['暂无数据']"
    />

    <view class="conter">
      <view
        v-for="(val,key,i) in brandList"
        :key="i"
      >
        <view class="caption">
          {{ key }}
        </view>
        <view class="body">
          <view
            v-for="(item,index) in val"
            :key="index"
            :class="['list',dataForm.brandId===item.brandId?'active':'']"
            @tap="brandType(item)"
          >
            <text class="text">
              {{ item.name }}
            </text><text class="iconfont">
              &#xe659;
            </text>
          </view>
        </view>
      </view>
      <view
        v-if="!falg && current>1"
        class="hint"
      >
        没有更多数据了
      </view>
      <view class="delivery">
        <button
          class="button"
          type="primary"
          @tap="toProd"
        >
          确定
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, onMounted, reactive } from 'vue'

const Data = reactive({
  isLoaded: false, // 列表是否加载完毕
  name: '',
  current: 1,
  size: 20,
  total: 0,
  brandList: {},
  falg: true
})

const { isLoaded, name, brandList, current, falg } = toRefs(Data)

const prodStore = useProdStore()

const dataForm = computed(() => prodStore.dataForm)

onMounted(() => {
  getDataList()
})

onReachBottom(() => {
  if (!Data.falg) {
    return
  }
  Data.current++
  getDataList({ current: Data.current })
})

const getDataList = ({ current = 1, brandName = '' } = {}) => {
  uni.showLoading({
    title: ''
  })
  Data.isLoaded = false
  http.request({
    url: '/admin/brand/listAvailableByCategoryAndName',
    method: 'GET',
    data: {
      categoryId: prodStore.dataForm.categoryId,
      size: Data.size,
      current,
      brandName

    }
  }).then(({ data: res }) => {
    Data.isLoaded = true
    if (res.records.length === 0) {
      Data.falg = false
    }
    for (let i = 0; i < res.records.length; i++) {
      let index = true
      for (const key in Data.brandList) {
        if (res.records[i].firstLetter === key) {
          Data.brandList[key].push(res.records[i])
          index = false
        }
      }
      if (index) {
        Data.brandList[res.records[i].firstLetter] = []
        i--
      }
    }
    uni.hideLoading()
    Data.current = res.current
    Data.total = res.total
  })
}

// 搜索框
const search = (name) => {
  Data.brandList = {}
  getDataList({ brandName: name })
}

const toProd = () => {
  uni.redirectTo({
    url: '/package-prod/pages/post-prod/post-prod'
  })
}

// 选择品牌
const brandType = (index) => {
  if (prodStore.dataForm.brandId === index.brandId) {
    prodStore.dataForm.brandId = null
    prodStore.dataForm.brandName = ''
  } else {
    prodStore.dataForm.brandId = index.brandId
    prodStore.dataForm.brandName = index.name
  }
}
</script>

<style lang="scss" scoped>
 .page-commodity-brand{
   display: flex;
   flex-direction: column;
   width: 100%;
    // position: fixed;
    // overflow: auto;
    top: 0;
    left: 0;
    // min-height: 100vh;
    font-size: 28rpx;
    background-color: #f8f8f8;
    height: 100vh;
    color: #333;
    font-family: PingFang SC;

    .conter{
      // overflow: auto;
      padding-bottom: 110rpx;
    }

    .title{
      padding: 20rpx 30rpx 32rpx;
      background-color: #fff;
      border-radius:0 0 10rpx 10rpx;

      // eslint-disable-next-line vue-scoped-css/no-unused-selector
      input{
        background-color: #F7F8FA;
        height: 64rpx;
        border-radius: 32rpx;
        padding-left: 30rpx;
        font-size: 24rpx;
      }
      // eslint-disable-next-line vue-scoped-css/no-unused-selector
      .uni-searchbar{
        padding: 0;
      }
    }
    .caption{
      // width: 100%;
      height: 60rpx;
      line-height: 60rpx;
      background-color: #f2f3f7;
      padding: 0 30rpx;
    }

    .body{
      border-radius: 10rpx;
      padding: 0 30rpx;
      background-color: #fff;

      .list{
        height: 90rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom:2rpx solid #F2F2F2 ;

        .iconfont{
          font-size: 34rpx;
          color: #fff;
        }
        .text{
        max-width: 600rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow:ellipsis
        }
      }

      .active{
          color: #082BA6;

          .iconfont{
           color: #082BA6;
        }

      }

    }
    .delivery{
      background-color: #fff;
      width: 700rpx;
      position: fixed;
      left: 0;
      bottom: 0;
      padding: 20rpx 30rpx;

      button{
      background-color:#082BA6 ;

      }
    }
    .hint{
      font-size: 24rpx;
      color: #999;
      text-align: center;
      background-color: #f2f3f7;
    }

  }
</style>
